<template>
    <div>
        <div class="header">
            <!-- <div>
                <el-input placeholder="请输入角色名称" v-model="name" clearable class="headerinput"></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </div> -->
            <div class="rightbtn">
                <el-button type="primary" size="small" icon="el-icon-edit" @click="openCreate">添加</el-button>
            </div>
        </div>
        <el-table :data="roleList" style="width: 100%">
            <el-table-column prop="name" label="角色名称" align="center" width="300"></el-table-column>
            <el-table-column prop="desc" label="说明" align="center"></el-table-column>
            <el-table-column label="操作" width="300" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openEdit(scope.row)">编辑</el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="getPermissions(scope.row.id)"
                        style="margin-right:10px"
                    >授权</el-button>
                    <!-- <el-button type="danger" size="mini">删除</el-button> -->
                    <el-popconfirm title="是否确认删除？" @confirm="deleteRole(scope.row)">
                        <template #reference>
                            <el-button type="danger" size="mini">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 角色编辑 -->
        <el-dialog title="编辑角色" :visible.sync="dialogFormVisible" width="30%" center>
            <el-form :model="form" label-width="120">
                <el-form-item label="角色名称">
                    <el-input v-model="form.name" autocomplete="off" class="elinput"></el-input>
                </el-form-item>
                <el-form-item label="角色说明">
                    <el-input v-model="form.desc" autocomplete="off" class="elinput"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updataRole">保 存</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 权限配置对话框 -->
        <el-dialog :visible.sync="permissionDialogFormVisible" title="权限配置">
            <el-tree
                ref="tree"
                :data="systemPermissions"
                :default-checked-keys="assignedPermissions"
                show-checkbox
                node-key="id"
                highlight-current
            >
                <span slot-scope="{ data }" class="custom-tree-node">
                    <span>{{ data.label }}</span>
                    <el-tag v-if="data.api" type="success" size="mini">{{ data.api }}</el-tag>
                </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="permissionDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updatePermission">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import * as request from '@/api/system'
export default {
    components: {},
    data() {
        return {
            dialogFormVisible: false,
            permissionDialogFormVisible: false,
            roleList: [],
            form: {
                id: "",
                name: "",
                desc: ""
            },
            systemPermissions: [],
            assignedPermissions: [],
            permissionForm: {
                roleId: '',
                permissions: []
            }
        };
    },
    mounted() {
        this.getRole()
    },
    methods: {
        async getRole() {
            const query = { page: 1, limit: 200 }
            try {
                const { errno, errmsg, data } = await request.getRoleList(query)
                if (errno === 0) {
                    this.roleList = data.items || []
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        },

        openCreate() {
            this.form.id = ''
            this.form.name = ''
            this.form.desc = ''
            this.dialogFormVisible = true
        },
        openEdit(item) {
            this.form.id = item.id
            this.form.name = item.name
            this.form.desc = item.desc
            this.dialogFormVisible = true
        },
        async updataRole() {
            if (!this.form.name) {
                return this.$message.warning('请输入角色名称')
            }
            if (!this.form.desc) {
                return this.$message.warning('请输入说明')
            }
            let params = { ...this.form }
            if (!this.form.id) {
                delete params.id
            }
            try {
                const { errno, errmsg } = await request[this.form.id ? 'updateRole' : 'createRole'](params)
                if (errno === 0) {
                    this.$message.success(errmsg)
                    this.getRole()
                    this.dialogFormVisible = false
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        },
        async deleteRole(item) {
            try {
                const { errno, errmsg } = await request.deleteRole(item)
                if (errno === 0) {
                    this.$message.success(errmsg)
                    this.getRole()
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        },
        async getPermissions(roleId) {
            this.permissionDialogFormVisible = true;
            this.permissionForm.roleId = roleId
            try {
                const { errno, errmsg, data } = await request.getPermissions({ roleId })
                if (errno === 0) {
                    this.systemPermissions = data.systemPermissions || []
                    this.assignedPermissions = data.assignedPermissions || []
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        },
        async updatePermission() {
            this.permissionForm.permissions = this.$refs.tree.getCheckedKeys(true)
            try {
                const { errno, errmsg } = await request.updatePermissions(this.permissionForm)
                if (errno === 0) {
                    this.$message.success(errmsg)
                    this.permissionDialogFormVisible = false
                    this.getRole()
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        }
    },
};
</script>
<style scoped>
.header {
    padding: 30px 30px 0;
    display: flex;
    background-color: #fff;
}
.headerinput {
    width: 300px;
    margin-right: 10px;
}
/* .rightbtn {
    margin: 0 30px 0 auto;
} */
</style>
